<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Role Management</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <link href="./css/index.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-hover: #4f46e5;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #f8fafc;
            /*padding: 20px;*/
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin-bottom: 1.5rem;
        }

        .card-header {
            background-color: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-header h5 {
            margin: 0;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .card-header h5 i {
            margin-right: 10px;
            color: var(--primary-color);
        }

        .search-form {
            background-color: white;
            padding: 1.25rem;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 1.5rem;
        }

        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .table thead th {
            border-bottom: none;
            background-color: #f1f5f9;
            /*color: #64748b;*/
            font-weight: 600;
            padding: 0.75rem 1rem;
            text-transform: uppercase;
            /*font-size: 0.75rem;*/
            letter-spacing: 0.5px;
        }

        .table tbody td {
            padding: 1rem;
            vertical-align: middle;
            border-top: 1px solid #f1f5f9;
            background-color: white;
        }

        .table tbody tr:hover td {
            background-color: #f8fafc;
        }


        .pagination {
            justify-content: center;
            margin-top: 1.5rem;
        }

        .loading-spinner {
            display: none;
            text-align: center;
            padding: 2rem;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="search-form">
        <div class="row g-3">
            <div class="col-md-2">
                <input type="text" class="form-control" id="search-from-name" name="name"
                       placeholder="Name">
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary" id="search-btn">
                    <i class="bi bi-search"></i></i>Search
                </button>
                <button class="btn btn-outline-secondary" id="reset-btn">
                    <i class="bi bi-arrow-clockwise"></i>Reset
                </button>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5><i class="fas fa-users"></i> Roles</h5>
            <button class="btn btn-primary btn-sm" id="add-btn">
                <i class="bi bi-plus-circle"></i>Add
            </button>
        </div>
        <div class="card-body p-0">
            <!-- 加载状态 -->
            <div class="loading-spinner" id="loading-spinner">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading ...</span>
                </div>
                <p class="mt-2">Loading ...</p>
            </div>

            <!-- 表格容器 -->
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Operation</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination">
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 添加/编辑用户模态框 -->
<div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">Add</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="modal-form">
                    <input type="hidden" id="modal-form-id">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="modal-form-name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="modal-form-name" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="modal-form-description" class="form-label">Description</label>
                            <input type="text" class="form-control" id="modal-form-description" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="save-btn">Save</button>
            </div>
        </div>
    </div>
</div>

<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>

<script src="../js/index.js"></script>
<script src="../utils/request.js"></script>
<script src="../utils/store.js"></script>
<script src="../js/place.js"></script>
</body>
</html>